<template>
    <div class="component-box move">
        <div class="history-search">
            <div class="history">
                <div>
                    <span class="icon iconfont icon-search"></span>
                    <span class="icon iconfont icon-trash"></span>
                </div>
                <span>历史搜索</span>
            </div>
            <div class="tag1"  v-if="history">
                <div
                    class="heh"
                    tag="span"
                    v-for="(item, index) in history"
                    :key="index"
                    @click="gotoSearch(item)"
                >{{ item }}</div>
            </div>
            <div class="tag1" v-if="!history">
                <div>暂无查询记录</div>
            </div>
        </div>
        <div class="hot-search">
            <div class="hot">
                <div>
                    <span class="icon iconfont icon-star"></span>
                </div>
                <span>热门搜索</span>
            </div>
            <div class="tag2">
                <div
                    class="heh"
                    v-for="(item, index) in hotWord" :key="index"
                    :style="'color:'+item.color"
                    @click="gotoSearch(item.query)"
                >{{ item.query}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
           history:[],
           hotWord:[]
        };
    },
    methods: {
        loadHistory(){
            let history = localStorage.getItem("userWord");
            this.history = JSON.parse(history);
        },
        loadHotWord(){
            this.$api.loadDataFormWord({
                platform:"H5",
                code:"hotWord"
            }).then(( { hotWord } )=>{
                this.hotWord = hotWord.data;
            }).catch(this.$error)
        },
        gotoSearch(q){
            if(this.history){
                if(this.history.indexOf(q)==-1){
                    this.history.unshift(q);
                }
            }else{
                this.history = [q];
            }
            localStorage.setItem("userWord",JSON.stringify(this.history));
            
            this.$emit("update:showSearch",false);
            this.$router.push({
                path:"/search",
                query:{
                    q:q
                }
            })
        }
    },
    beforeMount(){
        this.$root.$on("updateHistory",this.loadHistory)
    },
    mounted(){
        this.loadHistory();
        this.loadHotWord();  
    }
};
</script>
<style lang="less" scoped>
.component-box {
    // display: none;
    width: 100%;
    position: absolute;
    top: @h;
    bottom: 0px;
    background-color: white;
    z-index: 50;
    // margin-top: 200%;
}
.history-search {
    box-sizing: border-box;
    width: 100%;
    // height: 200px;
    border-bottom: 1px solid @99;
    padding: 40px 30px 30px 30px;
    .history {
        box-sizing: border-box;
        height: 50px;
        color: @font;
        > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            > span {
                font-size: 40px;
            }
        }
        > span {
            display: inline-block;
            position: relative;
            top: -45px;
            left: 50px;
            font-size: 36px;
        }
    }
    .tag1 {
        .tag;
        > .heh {
            left: 50px;
        }
    }
}
.hot-search {
    box-sizing: border-box;
    width: 100%;
    padding: 40px 30px 0 30px;
    .hot {
        box-sizing: border-box;
        height: 50px;
        color: @font;
        > div {
            display: flex;
            justify-content: space-between;
            > span {
                font-size: 40px;
            }
        }
        > span {
            display: inline-block;
            position: relative;
            top: -45px;
            left: 50px;
            font-size: 36px;
        }
    }
    .tag2 {
        .tag;
        text-align: left;
        > .heh {
            left: 50px;
        }
    }
}
// tag模板
.tag {
    width: 90%;
    margin-top: 20px;
    text-align: left;
    > .heh {
        position: relative;
        display: inline-block;
        padding: 5px;
        border: 1px solid @cc;
        border-radius: 10px;
        margin-right: 20px;
        margin-top: 10px;
        color: @font;
    }
}


</style>